/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

a:hover {
    color: #06e;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/*!
 * Bootstrap v2.3.0
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.carousel {
  position: relative;
  margin-bottom: 20px;
  line-height: 1;
}
.carousel-inner {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -moz-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.carousel-control.right {
  left: auto;
  right: 15px;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.carousel-indicators {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  margin: 0;
  list-style: none;
}
.carousel-indicators li {
  display: block;
  float: left;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  text-indent: -999px;
  background-color: #ccc;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}
.carousel-indicators .active {
  background-color: #fff;
}
.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  padding-bottom: 0;
  background: #333333;
  background: rgba(0, 0, 0, 0.25);
}
.carousel-caption h4,
.carousel-caption p {
  color: #ffffff;
  line-height: 20px;
}
.carousel-caption h4 {
  margin: 0 0 5px;
}
.carousel-caption p {
  margin-bottom: 0;
}

.carousel {margin-top: 20px; max-width: 100%}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */

 * {-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; *behavior: url(/boxsizing.htc);
}

html, body {margin: 0; width: 100%; height: 100%;}

body {background: url('../../images/SingingAloudLogobg.png') 50% 50% no-repeat,
                  url('../../images/paper-warm.gif') top left repeat;}

@media only screen and (min-width: 720px) {

body {background: url('../../images/SingingAloudLogo2015-transparent.png') 105% 5% no-repeat,
                  url('../../images/paper-warm.gif') top left repeat;}
}
/* Typography / Text Links
========================================  */
a, a:visited {color: #1171b8;}
h1, h2, h3, h4, h5 {font-family: 'Abril Fatface', Georgia, serif;}

h1      {font-size: 2.5em}
h2.pagetitle {font-size: 3em; color: rgba(240,59,36,0.3); margin: 0;}
h2.widgettitle {color: #3cb448; border-bottom: 1px solid rgba(0,0,0,0.1);}
h3 time {font-size: 0.7em; color: rgba(0,0,0,0.5);}
p, li, input#submit, time  {font: 400 17px/1.6 'Average', Garamond, Georgia, serif;}

header h1 {margin: 10px 0 0 0;}
p.description {margin: 0}

.menu-header-menu-container ul li, 
#sidebar ul li                     {font-family: 'Rancho', Georgia, serif; font-weight: bold; font-size: 1.3em;}
#sidebar ul li                     {font-weight: normal;}

.menu-header-menu-container ul li a,
.menu-header-menu-container ul li a:visited { color: #1171b8;}

.menu-header-menu-container ul li a:hover, 
#sidebar ul li a:hover                      {border-bottom: 1px solid #1171b8; }

h1 a, .menu-header-menu-container ul li a, 
#sidebar ul li a                            {text-decoration: none;}




h1 a, h1 a:visited {color: #f03b24;}

.textwidget ul {margin-top: 0; margin: 0;}
.textwidget p  {margin-bottom: 0;}

/* Images
========================================  */

img {max-width: 100%; height: auto;}

/* Grid system 
========================================  */
body {}
.branding {text-align: right; }
.container {max-width: 1240px; display: block; margin: 0 auto; padding: 10px 20px;}
.main {width: 100%; background: rgba(0,0,0,0.5); padding: 12px 0 24px 0; margin: 12px 0;
          border-top: 1px solid #e0ebb3;}
.site-container {padding-top: 10px;}

[class*='col-'] {
  float: none;
}
.col-2-3, .col-1-3,
.col-1-2, .col-1-4,
.col-1-5, .col-2-5 { width: 100%;}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  padding-right: 0; margin-bottom: 24px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}
.grid-pad {
  padding-right: 0;
}
.grid-pad > [class*='col-']:last-of-type {
  padding-right: 0;
}

@media only screen and (min-width: 720px) {
    .grid-pad       {padding-right: 0;}
    .grid-pad > [class*='col-']:last-of-type {
    padding-right: 0;}

    [class*='col-'] { float: left; margin-bottom: 0; padding-right: 20px;}
    .col-2-3        { width: 66.66%;}
    .col-1-3        { width: 33.33%;}
    .col-1-2        { width: 50%;}
    .col-1-4        { width: 25%;}
    .col-1-5        { width: 20%;}
    .col-2-5        { width: 40%;}

}

@media only screen and (min-width: 720px) {

.sidebar {border-left: solid 1px rgba(0,0,0,0.2); padding-left: 12px;}
}

footer {margin-bottom: 20px;}
footer .container [class*='col-'] {border-top: solid 1px rgba(0,0,0,0.2);}

@media only screen and (max-width: 720px) {

footer .container [class*='col-'] {border: none;}
footer .container [class*='col-']:first-of-type {border-top: solid 1px rgba(0,0,0,0.2);}
}

/* Menu
========================================  */


.logo {float: right; height: 120px; width: auto; margin: 0;}
.menu-header-menu-container    {/*border-bottom: 1px solid rgba(0,0,0,0.3); */padding-bottom: 10px}
.menu-header-menu-container ul {padding: 0; margin: 0;}
.menu-header-menu-container ul li {float: left; margin-right: 10px; padding: 3px 5px; background: rgba(240,59,36,0.1); 
                                   margin-bottom: 3px; border-radius: 3px;}
nav.menu {padding-bottom: 0;}

@media only screen and (min-width: 960px) {
.logo {height: 150px;}
nav.menu {margin-top: -50px;}

.menu-header-menu-container  {margin-right: 200px}

} 

@media only screen and (max-width: 720px) {
.logo {width: 100%; height: auto;}
h1, p.description {text-align: center;}
} 


/* Sidebar
========================================  */

#sidebar ul {list-style: none; padding: 0;}


/* Misc
========================================  */

.page-container {padding-top: 0}
.next-prev {padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.3);}
.ai1ec-agenda-widget-view .ai1ec-date-title{margin: 0}

/*css for All in one event calendar
break the lines in calendar view
tested with version 1.9.3
create a child theme and copy code to override.css file
source: http://wpfiles.wordpress.com
author:kevegard@gmail.com*
2013-02-21*/

.ai1ec-month-view .ai1ec-event
{
height:auto;
overflow: visible;
white-space:normal;
}

/*the upper code has some ugly effects on multiday events, so here I just set back the basic values for that*/

.ai1ec-month-view .ai1ec-multiday .ai1ec-event
{
overflow: hidden;
white-space:nowrap;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}